<template>
    <div class="filter">
        <div class="filter-item">
            <label for="">所属单位：</label>
            <el-select
                v-model="searchForm.depId"
                class="m-2"
                placeholder="请选择所属单位"
                style="width: 145px"
                :disabled="localTypeUnit != '1'"
                @change="depIdChange"
            >
                <el-option
                    v-for="item in depIdList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
        </div>

        <div class="filter-item">
            <label for="">巡检时间：</label>
            <el-date-picker
                style="width: 145px"
                v-model="searchForm.dateTime"
                type="date"
                :size="'default'"
            />
        </div>
        <div class="filter-item">
            <el-button
                type="primary"
                @click="search"
            >查询</el-button>
        </div>
        <div class="filter-item">
            <el-button
                type="primary"
                @click="reset"
            >重置</el-button>
        </div>
    </div>
    <div class="dataList">
        <el-empty
            v-show="dataList.length == 0"
            description="暂无数据"
            :image-size="60"
        />
        <el-row
            :gutter="24"
            style="width: 100%"
        >
            <el-col
                :span="8"
                v-for="item in dataList"
                :key="item.mod_name"
            >
                <el-card
                    class="box-card"
                    shadow="always"
                    style="margin-bottom: 20px"
                >
                    <template #header>
                        <div class="header_flex">
                            <div class="card-header">
                                <p style="font-size: 14px;"><span style="margin-right: 20px;">所属单位：{{ item.mod_name }}</span><span>巡检时间：{{ item.mod_name }}</span></p>
                            </div>
                        </div>
                    </template>
                    <div class="mqttInfo">

                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>

    <el-dialog
        v-model="editHzVisible"
        title="修改"
        width="300"
    >
        <el-form
            ref="ruleFormRef"
            label-width="auto"
            class="demo-ruleForm"
        >
            <el-form-item
                label="频率(Hz):"
                prop="hz"
            >
                <el-input
                    v-model="hz"
                    style="width: 190px"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editHzVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    v-if="addRoleVisibleType !== 'detail'"
                    @click="submitForm(ruleFormRef)"
                >
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import equipmentHttp from "@/https/equipment.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { onMounted, onUnmounted, reactive, ref } from "vue";
let dataList = ref([]);
const delay = ref(10 * 1000);
let timer = null;

const depIdList = ref([
    { label: "全部", value: "1" },
    { label: "星沙厂", value: "2" },
    { label: "城西厂", value: "3" },
    { label: "城北厂", value: "4" },
    { label: "城南厂", value: "5" },
    { label: "城东厂", value: "6" },
]);
let searchForm = reactive({
    depId: "",
    dateTime: "",
});

const localTypeUnit = ref(Storage.localGet("depId"));
searchForm.depId = localTypeUnit.value;
const getFacilityDetail = () => {
    equipmentHttp.getFacilityDetail().then((res) => {
        console.log(res.data);
        dataList.value = [];
        if (res.data.code === 200) {
            let keys = Object.keys(res.data.data);
            keys.forEach((item) => {
                dataList.value.push(res.data.data[item]);
            });
            console.log(dataList.value, '1111111');
        }
    });
};
const editHzVisible = ref(false)
const hz = ref('')
const editHz = (row, index, m, n) => {
    hz.value = m.value
    editHzVisible.value = true
}
const search = () => {
    getFacilityDetail()
}
onMounted(() => {
    getFacilityDetail();
    timer = setInterval(() => {
        getFacilityDetail();
    }, delay.value);
});
onUnmounted(() => {
    clearInterval(timer);
});
</script>

<style scoped lang="less">
.card-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
    font-size: 18px;
    .small {
        font-size: 14px;
        color: #666;
        margin-top: 10px;
    }
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
    width: 33%;
    font-size: 18px;
    font-weight: bold;
    color: #409eff;
    display: flex;
    flex-direction: row;
    align-items: center;
    span {
        font-size: 14px;
        font-weight: 400;
        color: #333;
    }
    .paramListValue {
        font-weight: bold;
        color: #409eff;
        position: relative;
        margin-right: 10px;
        a {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 3px;
            background: red;
            top: 0;
            right: -10px;
        }
    }
}
.mqttInfo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.header_flex {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
</style>
